<template>
  <div class="leaderboard-cosmos">
    <!-- 粒子流体动画背景 -->
    <div class="particle-background">
      <canvas ref="particleCanvas" class="particles"></canvas>
    </div>
    
    <div class="cosmos-container">
      <header class="cosmic-header">
        <h1 class="nebula-title">环保荣耀殿堂</h1>
        <div class="cosmic-nav">
          <button class="cosmic-btn active">
            <span class="cosmic-icon">🏆</span>
            <span>排行榜</span>
          </button>
          <button class="cosmic-btn">
            <span class="cosmic-icon">📊</span>
            <span>数据分析</span>
          </button>
          <button class="cosmic-btn">
            <span class="cosmic-icon">🔮</span>
            <span>预测趋势</span>
          </button>
        </div>
      </header>

      <!-- 四维操控面板 -->
      <section class="dimension-controls">
        <div class="time-dimension">
          <h3 class="dimension-title">时间维度</h3>
          <div class="dimension-options">
            <button 
              v-for="period in periodOptions" 
              :key="period.value"
              class="dimension-btn" 
              :class="{ active: currentPeriod === period.value }"
              @click="changePeriod(period.value)"
            >
              {{ period.label }}
            </button>
          </div>
        </div>
        
        <div class="category-dimension">
          <h3 class="dimension-title">维度分类</h3>
          <select class="dimension-select" v-model="currentCategory">
            <option v-for="category in categoryOptions" :key="category.value" :value="category.value">
              {{ category.label }}
            </option>
          </select>
        </div>
      </section>
      
      <!-- 加载状态 -->
      <div v-if="loading && !topUsers.length" class="cosmic-loading">
        <div class="orbital-spinner"></div>
        <p>正在进行跨维度数据采集...</p>
      </div>
      
      <!-- 荣耀殿堂 - 前三名展示 -->
      <section v-else-if="topUsers.length > 0" class="glory-podium">
        <!-- 第二名 -->
        <div class="champion second" v-if="topUsers.length > 1">
          <div class="rank-aura silver">2</div>
          <div class="champion-avatar-container">
            <div class="champion-avatar">
              <img v-if="topUsers[1].avatar" :src="topUsers[1].avatar" alt="用户头像" />
              <div v-else class="default-avatar" :style="{ background: generateAvatarGradient(topUsers[1].userName) }">
                {{ getUserInitial(topUsers[1]) }}
          </div>
            </div>
            <div class="avatar-aura silver-aura"></div>
          </div>
          <div class="champion-name">{{ topUsers[1].nickName || topUsers[1].userName }}</div>
          <div class="champion-score">{{ formatScore(topUsers[1]) }}</div>
          <div class="champion-achievement">减少碳排放相当于种植了23棵树</div>
        </div>
        
        <!-- 第一名 -->
        <div class="champion first" v-if="topUsers.length > 0">
          <div class="rank-aura gold">1</div>
          <div class="champion-avatar-container">
            <div class="champion-avatar">
              <img v-if="topUsers[0].avatar" :src="topUsers[0].avatar" alt="用户头像" />
              <div v-else class="default-avatar" :style="{ background: generateAvatarGradient(topUsers[0].userName) }">
                {{ getUserInitial(topUsers[0]) }}
              </div>
            </div>
            <div class="avatar-aura gold-aura"></div>
            <div class="crown">👑</div>
          </div>
          <div class="champion-name">{{ topUsers[0].nickName || topUsers[0].userName }}</div>
          <div class="champion-score">{{ formatScore(topUsers[0]) }}</div>
          <div class="champion-achievement">环保领袖 - 影响了32位用户</div>
          <button class="story-btn">聆听登顶故事</button>
        </div>
        
        <!-- 第三名 -->
        <div class="champion third" v-if="topUsers.length > 2">
          <div class="rank-aura bronze">3</div>
          <div class="champion-avatar-container">
            <div class="champion-avatar">
              <img v-if="topUsers[2].avatar" :src="topUsers[2].avatar" alt="用户头像" />
              <div v-else class="default-avatar" :style="{ background: generateAvatarGradient(topUsers[2].userName) }">
                {{ getUserInitial(topUsers[2]) }}
          </div>
            </div>
            <div class="avatar-aura bronze-aura"></div>
          </div>
          <div class="champion-name">{{ topUsers[2].nickName || topUsers[2].userName }}</div>
          <div class="champion-score">{{ formatScore(topUsers[2]) }}</div>
          <div class="champion-achievement">本月进步最快的用户</div>
        </div>
      </section>
      
      <!-- 社区积分排行榜 -->
      <section class="community-leaderboard">
        <div class="leaderboard-container">
          <div class="leaderboard-column">
            <h3 class="section-title">
              <span class="cosmic-icon">🌍</span>
              <span>社区积分排行榜</span>
            </h3>
            
            <div class="simple-leaderboard">
              <div v-if="loading && !leaderboardData.length" class="loading-simple">
                <div class="orbital-spinner small"></div>
                <p>加载数据中...</p>
              </div>
              
              <div v-else class="user-list">
                <div 
                  v-for="(user, index) in leaderboardData" 
                  :key="user.id || index"
                  class="user-list-item"
                  :class="{ 'current-user': isCurrentUser(user) }"
                >
                  <div class="user-rank" :class="getRankClass(index + 1)">
                    {{ index + 1 }}
                  </div>
                  
                  <div class="user-avatar-simple">
                    <img v-if="user.avatar" :src="user.avatar" alt="头像" />
                    <div v-else class="default-avatar-simple" :style="{ background: generateAvatarGradient(user.userName) }">
                      {{ getUserInitial(user) }}
                    </div>
                  </div>
                  
                  <div class="user-info-simple">
                    <div class="user-name-simple">{{ user.nickName || user.userName }}</div>
                    <div class="user-points-simple">
                      <span class="points-value">{{ user.points || 0 }} 积分</span>
                      <span class="carbon-value">{{ user.carbonReduced || 0 }}kg 减碳量</span>
                    </div>
                  </div>
                </div>
                
                <div v-if="!loading && leaderboardData.length === 0" class="empty-simple">
                  暂无排行榜数据
                </div>
              </div>
            
              <!-- 分页控制 -->
              <div class="simple-pagination" v-if="totalPages > 0">
                <button 
                  class="simple-page-btn"
                  :disabled="currentPage === 1"
                  @click="goToPage(currentPage - 1)"
                >
                  上一页
                </button>
                
                <div class="page-indicators">
                  <span v-for="page in displayedPages" :key="page" 
                    class="page-number" 
                    :class="{ 'active': currentPage === page }"
                    @click="goToPage(page)"
                  >
                    {{ page }}
                  </span>
                </div>
                
                <button 
                  class="simple-page-btn"
                  :disabled="currentPage >= totalPages"
                  @click="nextPage"
                >
                  下一页
                </button>
              </div>
            </div>
          </div>
          
          <div class="animation-column">
            <div class="eco-animation">
              <div class="eco-visual">
                <div class="growing-tree">
                  <div class="tree-trunk"></div>
                  <div class="tree-leaves"></div>
                </div>
                <div class="eco-stats">
                  <div class="eco-stat">
                    <div class="stat-label">累计减碳</div>
                    <div class="stat-value">{{ getTotalCarbon() }} kg</div>
                  </div>
                  <div class="eco-stat">
                    <div class="stat-label">相当于种植</div>
                    <div class="stat-value">{{ Math.floor(getTotalCarbon() / 20) }} 棵树</div>
                  </div>
                </div>
              </div>
              <div class="eco-info">
                <h4>环保影响力</h4>
                <p>所有用户的共同努力，正在为地球创造更绿色的未来</p>
                <div class="impact-meter">
                  <div class="impact-progress" :style="{ width: `${Math.min(100, getTotalCarbon() / 100)}%` }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 分页 -->
      <div class="pagination-cosmic" v-if="totalPages > 0">
        <button 
          class="pagination-arrow prev"
          :disabled="currentPage === 1"
          @click="goToPage(currentPage - 1)"
        >
          ←
        </button>
        
        <div class="pagination-indicator">
          <span class="current-page">{{ currentPage }}</span>
          <span class="page-separator">/</span>
          <span class="total-pages">{{ totalPages }}</span>
        </div>
        
        <button 
          class="pagination-arrow next"
          :disabled="currentPage >= totalPages"
          @click="nextPage"
        >
          →
        </button>
      </div>
      
      <!-- 排行榜说明 -->
      <section class="leaderboard-info">
        <h3>排行榜说明</h3>
        <p>• 周榜：每周一零点更新，记录上一周用户的环保行动和减碳数据</p>
        <p>• 月榜：每月1日零点更新，记录上一个月用户的环保行动和减碳数据</p>
        <p>• 总榜：实时更新，记录用户自注册以来的所有环保数据累计</p>
        <p>• 排名奖励：周榜前10名和月榜前20名将获得额外积分奖励</p>
      </section>
    </div>
  </div>
</template>

<script>
import { getLeaderboard } from '@/api/auth';
import { getUserInfo } from '@/utils/auth';

export default {
  name: 'LeaderboardPage',
  data() {
    return {
      loading: false,
      error: null,
      leaderboardData: [],
      topUsers: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      totalPages: 0,
      currentUser: null,
      activeCardIndex: null,
      
      // 用户预测数据
      userPrediction: {
        nextWeekRank: null,
        nextMonthRank: null,
        improvementTip: null
      },
      
      // 筛选选项
      periodOptions: [
        { label: '日榜', value: 'day' },
        { label: '周榜', value: 'week' },
        { label: '月榜', value: 'month' },
        { label: '年榜', value: 'year' },
        { label: '总榜', value: 'all' }
      ],
      categoryOptions: [
        { label: '减碳量', value: 'carbon' },
        { label: '挑战完成', value: 'challenges' },
        { label: '环保行动', value: 'actions' },
        { label: '社区影响力', value: 'influence' },
        { label: '创新贡献', value: 'innovation' },
        { label: '综合积分', value: 'points' }
      ],
      currentPeriod: 'month',
      currentCategory: 'points',
      
      // 粒子背景参数
      particles: [],
      animationFrameId: null
    };
  },
  computed: {
    leaderboardUsers() {
      // 显示前3名以外的用户
      return this.leaderboardData.slice(3);
    },
    displayedPages() {
      // 生成要显示的页码列表
      const pages = [];
      const maxDisplayed = 5; // 最多显示5个页码
      
      if (this.totalPages <= maxDisplayed) {
        // 如果总页数少于5，全部显示
        for (let i = 1; i <= this.totalPages; i++) {
          pages.push(i);
        }
      } else {
        // 否则，显示当前页附近的页码
        let start = Math.max(1, this.currentPage - 2);
        let end = Math.min(this.totalPages, start + maxDisplayed - 1);
        
        // 调整起始页，确保始终显示5个页码（如果有5页或更多）
        if (end - start + 1 < maxDisplayed) {
          start = Math.max(1, end - maxDisplayed + 1);
        }
        
        for (let i = start; i <= end; i++) {
          pages.push(i);
        }
      }
      
      return pages;
    }
  },
  mounted() {
    // 初始化粒子背景
    this.initParticles();
    
    // 监听窗口大小变化，重新调整粒子背景
    window.addEventListener('resize', this.resizeParticles);
    
    // 为卡片添加随机延迟的入场动画
    this.$nextTick(() => {
      const cards = document.querySelectorAll('.user-card');
      cards.forEach((card, index) => {
        card.style.animationDelay = `${1.8 + (index * 0.1)}s`;
      });
    });
  },
  beforeDestroy() {
    // 清理动画和事件监听
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
    window.removeEventListener('resize', this.resizeParticles);
  },
  created() {
    // 获取当前用户信息
    this.currentUser = getUserInfo();
    
    // 从URL参数中获取筛选条件
    const query = this.$route.query;
    if (query.period && this.periodOptions.some(p => p.value === query.period)) {
      this.currentPeriod = query.period;
    }
    if (query.category && this.categoryOptions.some(c => c.value === query.category)) {
      this.currentCategory = query.category;
    }
    if (query.page && !isNaN(parseInt(query.page))) {
      this.currentPage = parseInt(query.page);
    }
    
    // 获取排行榜数据
    this.fetchLeaderboardData();
  },
  watch: {
    currentPeriod() {
      this.currentPage = 1;
      this.updateUrl();
      this.fetchLeaderboardData();
    },
    currentCategory() {
      this.currentPage = 1;
      this.updateUrl();
      this.fetchLeaderboardData();
    }
  },
  methods: {
    async fetchLeaderboardData() {
      this.loading = true;
      
      try {
        const params = {
          pageNo: this.currentPage,
          pageSize: this.pageSize
        };
        
        const response = await getLeaderboard(params);
        
        if (response.success && response.data) {
          this.leaderboardData = response.data.result || response.data.records || [];
          this.totalItems = response.data.total || 0;
          this.totalPages = response.data.pages || Math.ceil(this.totalItems / this.pageSize);
          
          // 如果是第一页，提取前3名
          if (this.currentPage === 1) {
            this.topUsers = this.leaderboardData.slice(0, 3);
          }
        } else {
          this.error = response.message || '获取排行榜失败';
          this.leaderboardData = [];
          this.topUsers = [];
        }
      } catch (error) {
        console.error('获取排行榜失败:', error);
        this.error = '获取排行榜失败，请稍后重试';
        this.leaderboardData = [];
        this.topUsers = [];
      } finally {
        this.loading = false;
      }
    },
    changePeriod(period) {
      if (this.currentPeriod !== period) {
        this.currentPeriod = period;
      }
    },
    goToPage(page) {
      if (page !== this.currentPage) {
        this.currentPage = page;
        this.updateUrl();
        this.fetchLeaderboardData();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.updateUrl();
        this.fetchLeaderboardData();
      }
    },
    updateUrl() {
      // 更新URL中的查询参数，但不触发路由变化
      this.$router.replace({
        query: {
          period: this.currentPeriod,
          category: this.currentCategory,
          page: this.currentPage
        }
      }).catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          throw err;
        }
      });
    },
    getUserInitial(user) {
      const name = user.nickName || user.userName || '';
      if (!name) return '用';
      
      // 如果是中文名，取第一个字
      if (/[\u4e00-\u9fa5]/.test(name)) {
        return name.charAt(0);
      }
      
      // 如果是英文名，取首字母
      return name.charAt(0).toUpperCase();
    },
    generateAvatarGradient(username) {
      // 根据用户名生成一个固定的渐变色
      let hash = 0;
      const name = username || '';
      
      for (let i = 0; i < name.length; i++) {
        hash = name.charCodeAt(i) + ((hash << 5) - hash);
      }
      
      // 确保哈希值为正
      hash = Math.abs(hash);
      
      // 生成两个颜色
      const hue1 = hash % 360;
      const hue2 = (hash * 7) % 360;
      
      return `linear-gradient(135deg, hsl(${hue1}, 70%, 60%), hsl(${hue2}, 70%, 60%))`;
    },
    calculateLevel(points) {
      if (!points) return 1;
      return Math.floor(Math.sqrt(points / 100)) + 1;
    },
    isCurrentUser(user) {
      if (!this.currentUser || !user) return false;
      return (
        this.currentUser.userName === user.userName || 
        this.currentUser.id === user.id
      );
    },
    getDisplayRank(index) {
      // 如果是第一页，考虑前3名已经展示过了
      if (this.currentPage === 1) {
        return index + 4; // 从第4名开始
      } else {
        // 其他页从位置计算排名
        return (this.currentPage - 1) * this.pageSize + index + 1;
      }
    },
    getScoreLabel() {
      // 根据当前的分类选项返回对应的得分标签
      switch (this.currentCategory) {
        case 'carbon':
          return '减碳量';
        case 'challenges':
          return '挑战数';
        case 'actions':
          return '行动数';
        case 'influence':
          return '影响力';
        case 'innovation':
          return '创新值';
        case 'points':
          return '积分';
        default:
          return '积分';
      }
    },
    formatScore(user) {
      // 根据当前分类格式化得分显示
      if (!user) return '0';
      
      switch (this.currentCategory) {
        case 'carbon':
          return `${user.carbonReduced || 0} kg`;
        case 'challenges':
          return `${user.challengesCompleted || 0} 个`;
        case 'actions':
          return `${user.actionsCompleted || 0} 个`;
        case 'influence':
          return `${user.influence || 0} 点`;
        case 'innovation':
          return `${user.innovation || 0} 分`;
        case 'points':
          return `${user.points || 0} 分`;
        default:
          return `${user.points || 0} 分`;
      }
    },
    // 粒子背景相关方法
    initParticles() {
      const canvas = this.$refs.particleCanvas;
      if (!canvas) return;
      
      const ctx = canvas.getContext('2d');
      
      // 设置canvas大小为窗口大小
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      // 创建粒子
      this.particles = [];
      const particleCount = Math.floor(window.innerWidth / 10); // 根据窗口宽度确定粒子数量
      
      for (let i = 0; i < particleCount; i++) {
        this.particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          radius: Math.random() * 2 + 1,
          color: this.getRandomColor(),
          speedX: Math.random() * 2 - 1,
          speedY: Math.random() * 2 - 1,
          opacity: Math.random() * 0.5 + 0.2
        });
      }
      
      // 动画函数
      const animate = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 绘制粒子
        this.particles.forEach(particle => {
          ctx.beginPath();
          ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(${particle.color}, ${particle.opacity})`;
          ctx.fill();
          
          // 移动粒子
          particle.x += particle.speedX;
          particle.y += particle.speedY;
          
          // 边界检查
          if (particle.x < 0 || particle.x > canvas.width) {
            particle.speedX = -particle.speedX;
          }
          
          if (particle.y < 0 || particle.y > canvas.height) {
            particle.speedY = -particle.speedY;
          }
        });
        
        this.animationFrameId = requestAnimationFrame(animate);
      };
      
      animate();
    },
    
    resizeParticles() {
      const canvas = this.$refs.particleCanvas;
      if (!canvas) return;
      
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    },
    
    getRandomColor() {
      // 返回偏绿色调的随机颜色RGB值
      const r = Math.floor(Math.random() * 100);
      const g = Math.floor(Math.random() * 100 + 155); // 确保绿色分量较高
      const b = Math.floor(Math.random() * 100);
      
      return `${r}, ${g}, ${b}`;
    },

    // 卡片交互方法
    activateCard(index) {
      this.activeCardIndex = index;
    },
    
    deactivateCard(index) {
      if (this.activeCardIndex === index) {
        this.activeCardIndex = null;
      }
    },
    
    getRankClass(rank) {
      if (rank === 1) return 'rank-1';
      if (rank === 2) return 'rank-2';
      if (rank === 3) return 'rank-3';
      if (rank <= 10) return 'rank-top';
      return '';
    },
    
    getScoreClass(rank) {
      if (rank === 1) return 'score-1';
      if (rank === 2) return 'score-2';
      if (rank === 3) return 'score-3';
      if (rank <= 10) return 'score-top';
      return '';
    },
    
    getRankGlowClass(rank) {
      if (rank === 1) return 'glow-1';
      if (rank === 2) return 'glow-2';
      if (rank === 3) return 'glow-3';
      if (rank <= 10) return 'glow-top';
      return '';
    },
    
    getLevelProgress(points) {
      if (!points) return 0;
      const currentLevel = this.calculateLevel(points);
      const pointsForCurrentLevel = Math.pow(currentLevel - 1, 2) * 100;
      const pointsForNextLevel = Math.pow(currentLevel, 2) * 100;
      const pointsNeeded = pointsForNextLevel - pointsForCurrentLevel;
      const pointsGained = points - pointsForCurrentLevel;
      return Math.min(100, Math.floor((pointsGained / pointsNeeded) * 100));
    },
    
    getNormalizedValue(value, type) {
      if (!value) return 0;
      
      // 根据类型确定基准值
      const benchmarks = {
        carbon: 500, // 500kg作为满值
        challenges: 20, // 20个挑战作为满值
        actions: 50 // 50个行动作为满值
      };
      
      return Math.min(100, Math.floor((value / benchmarks[type]) * 100));
    },
    
    // 虚实共生体验相关方法
    simulateRanking() {
      // 模拟生成用户未来排名的预测
      this.userPrediction.nextWeekRank = Math.floor(Math.random() * 20) + 1;
      this.userPrediction.nextMonthRank = Math.floor(Math.random() * 15) + 1;
      
      // 生成改进建议
      const tips = [
        "多参与每周挑战，可以提高您的碳减排积分！",
        "分享您的环保成果到社区，提升社区影响力！",
        "连续签到可以获得更多积分，坚持就是胜利！",
        "尝试不同类型的环保行动，全面提升您的排名！",
        "邀请朋友加入，双方都可以获得额外积分奖励！"
      ];
      
      this.userPrediction.improvementTip = tips[Math.floor(Math.random() * tips.length)];
      
      // 显示提示动画
      this.$nextTick(() => {
        const simulationContainer = document.querySelector('.simulation-container');
        if (simulationContainer) {
          // 添加动画类
          simulationContainer.classList.add('prediction-active');
          
          // 添加打字机效果显示预测结果
          const valueElements = document.querySelectorAll('.prediction-value');
          valueElements.forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'scale(0.8)';
            
            setTimeout(() => {
              el.style.opacity = '1';
              el.style.transform = 'scale(1)';
              el.classList.add('highlighted');
              
              // 移除高亮效果
              setTimeout(() => {
                el.classList.remove('highlighted');
              }, 1000);
            }, 300);
          });
          
          // 移除动画类
          setTimeout(() => {
            simulationContainer.classList.remove('prediction-active');
          }, 1500);
        }
      });
    },
    
    showImprovementPath() {
      // 这里可以实现显示提升路径的功能
      this.$message({
        message: '提升路径功能即将上线，敬请期待！',
        type: 'success'
      });
    },
    
    // 计算所有用户的总减碳量
    getTotalCarbon() {
      if (!this.leaderboardData || this.leaderboardData.length === 0) {
        return 0;
      }
      
      // 计算当前页面所有用户的减碳总量
      const pageTotal = this.leaderboardData.reduce((sum, user) => {
        return sum + (user.carbonReduced || 0);
      }, 0);
      
      // 根据平均值估算总量
      const avgPerUser = pageTotal / this.leaderboardData.length;
      const estimatedTotal = Math.round(avgPerUser * this.totalItems);
      
      return estimatedTotal > 0 ? estimatedTotal : pageTotal;
    },
  }
}
</script>

<style scoped>
/* 宇宙主题样式 */
.leaderboard-cosmos {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(to bottom, #0a2b3d, #1b3c4d);
  color: #fff;
  padding: 20px 0;
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 粒子背景 */
.particle-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.particles {
  width: 100%;
  height: 100%;
}

.cosmos-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 宇宙标题与导航 */
.cosmic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.nebula-title {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
  margin: 0;
  position: relative;
  overflow: hidden;
}

.nebula-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.2) 50%, 
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.cosmic-nav {
  display: flex;
  gap: 10px;
  animation: fadeInRight 0.5s ease-out;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

@keyframes fadeInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.cosmic-btn {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.cosmic-btn:hover, .cosmic-btn.active {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
  transform: translateY(-2px);
}

.cosmic-btn:active {
  transform: translateY(0);
}

.cosmic-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.cosmic-btn:hover::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

.cosmic-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.cosmic-btn:hover .cosmic-icon {
  transform: scale(1.2);
}

/* 四维操控面板 */
.dimension-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  margin-bottom: 30px;
  transform: translateY(20px);
  opacity: 0;
  animation: slideUp 0.5s ease-out forwards;
  animation-delay: 0.4s;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.dimension-title {
  font-size: 16px;
  margin: 0 0 10px 0;
  color: rgba(255, 255, 255, 0.7);
}

.dimension-options {
  display: flex;
  gap: 10px;
}

.dimension-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.dimension-btn:hover, .dimension-btn.active {
  background: rgba(76, 175, 80, 0.3);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.dimension-select {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  min-width: 150px;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.dimension-select:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.dimension-select option {
  background: #1b3c4d;
  color: #fff;
}

/* 加载状态 */
.cosmic-loading {
  text-align: center;
  padding: 60px 0;
}

.orbital-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border: 3px solid rgba(76, 175, 80, 0.3);
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: relative;
}

.orbital-spinner::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid rgba(76, 175, 80, 0.2);
  border-radius: 50%;
  animation: spin 2s linear infinite reverse;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 荣耀殿堂 - 前三名展示 */
.glory-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 50px;
  position: relative;
  padding: 20px 0;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 0.6s;
}

.champion {
  position: relative;
  text-align: center;
  padding: 20px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
}

.champion.first {
  animation: championAppear 0.6s ease-out forwards;
  animation-delay: 0.8s;
}

.champion.second {
  animation: championAppear 0.6s ease-out forwards;
  animation-delay: 1s;
}

.champion.third {
  animation: championAppear 0.6s ease-out forwards;
  animation-delay: 1.2s;
}

@keyframes championAppear {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.champion:hover {
  transform: translateY(-10px) scale(1.05);
  z-index: 10;
}

.rank-aura {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  z-index: 3;
}

.gold {
  background: linear-gradient(to bottom right, #FFD700, #FFC107);
  color: #000;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

.silver {
  background: linear-gradient(to bottom right, #C0C0C0, #9E9E9E);
  color: #000;
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.7);
}

.bronze {
  background: linear-gradient(to bottom right, #CD7F32, #BF360C);
  color: #fff;
  box-shadow: 0 0 15px rgba(205, 127, 50, 0.7);
}

.champion-avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 15px;
}

.first .champion-avatar-container {
  width: 150px;
  height: 150px;
}

.champion-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 2;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.champion-avatar img, .default-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  color: #fff;
}

.first .default-avatar {
  font-size: 80px;
}

.avatar-aura {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  z-index: 1;
  opacity: 0.7;
  animation: pulse 2s infinite;
}

.champion:hover .avatar-aura {
  animation: pulseFast 1s infinite;
}

@keyframes pulseFast {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.7; }
}

.gold-aura {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0) 70%);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.silver-aura {
  background: radial-gradient(circle, rgba(192, 192, 192, 0.3) 0%, rgba(192, 192, 192, 0) 70%);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
}

.bronze-aura {
  background: radial-gradient(circle, rgba(205, 127, 50, 0.3) 0%, rgba(205, 127, 50, 0) 70%);
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.5);
}

.crown {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  z-index: 3;
  filter: drop-shadow(0 0 5px gold);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.champion-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.first .champion-name {
  font-size: 22px;
}

.champion-score {
  font-size: 16px;
  font-weight: 700;
  color: #4CAF50;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.first .champion-score {
  font-size: 20px;
}

.champion-achievement {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 150px;
  margin: 0 auto;
}

.story-btn {
  margin-top: 10px;
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.story-btn:hover {
  background: rgba(76, 175, 80, 0.4);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/* 排行榜表格样式 */
.leaderboard-cards,
.virtual-reality-experience,
.simulation-container,
.simulation-title,
.simulation-content,
.user-avatar-container,
.avatar-ripple,
.simulation-info,
.simulation-welcome, 
.simulation-text,
.simulation-prediction,
.prediction-item,
.prediction-label,
.prediction-value,
.improvement-tips,
.tip-title,
.tip-content,
.simulation-actions,
.cosmic-action-btn,
.btn-icon,
.card-container,
.user-card,
.card-rank,
.avatar-glow,
.user-name,
.rank-badge,
.user-level,
.level-bar,
.level-progress,
.level-text,
.card-details-expanded,
.stat-item,
.stat-icon,
.bar-chart,
.bar,
.card-score {
  /* 这些样式已被删除，因为相关组件已移除 */
}

/* 社区积分排行榜样式 */
.community-leaderboard {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: 1.8s;
}

.leaderboard-container {
  display: flex;
  flex-direction: row;
}

.leaderboard-column {
  flex: 6;
  border-right: 1px solid #f0f0f0;
}

.animation-column {
  flex: 4;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.simple-leaderboard {
  padding: 0;
}

.loading-simple {
  text-align: center;
  padding: 30px;
}

.user-list {
  border-top: 1px solid #f0f0f0;
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.user-list::-webkit-scrollbar {
  width: 6px;
}

.user-list::-webkit-scrollbar-thumb {
  background-color: rgba(76, 175, 80, 0.3);
  border-radius: 3px;
}

.user-list-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.user-list-item:hover {
  background-color: #f9f9f9;
}

.user-list-item.current-user {
  background-color: rgba(76, 175, 80, 0.05);
}

.user-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
  background-color: #e0e0e0;
  font-size: 12px;
}

.user-rank.rank-1 {
  background-color: #FFC107;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.user-rank.rank-2 {
  background-color: #9E9E9E;
  box-shadow: 0 0 5px rgba(158, 158, 158, 0.5);
}

.user-rank.rank-3 {
  background-color: #BF360C;
  box-shadow: 0 0 5px rgba(191, 54, 12, 0.5);
}

.user-rank.rank-top {
  background-color: #4CAF50;
}

.user-avatar-simple {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.user-avatar-simple img, .default-avatar-simple {
    width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar-simple {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: white;
}

.user-info-simple {
    flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-name-simple {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.user-points-simple {
  display: flex;
  font-size: 12px;
  color: #666;
  gap: 12px;
}

.points-value {
  color: #4CAF50;
  font-weight: 500;
}

.carbon-value {
  color: #03A9F4;
}

.empty-simple {
    text-align: center;
  padding: 30px;
  color: #999;
}

/* 简易分页控制 */
.simple-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
}

.simple-page-btn {
  padding: 6px 15px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.simple-page-btn:hover:not(:disabled) {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.simple-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-indicators {
  display: flex;
  margin: 0 10px;
}

.page-number {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-number:hover {
  background-color: #f0f0f0;
}

.page-number.active {
  background-color: #4CAF50;
  color: white;
}

/* 右侧生态动画专栏 */
.eco-animation {
  width: 100%;
  height: 100%;
  display: flex;
    flex-direction: column;
    align-items: center;
  gap: 20px;
  padding: 20px;
}

.eco-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.growing-tree {
  position: relative;
  width: 120px;
  height: 180px;
  margin-bottom: 20px;
}

.tree-trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 60px;
  background: linear-gradient(to bottom, #8B4513, #A0522D);
  border-radius: 0 0 5px 5px;
}

.tree-leaves {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at center, #4CAF50, #2E7D32);
  border-radius: 50%;
  animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.tree-leaves::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 5px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at center, #8BC34A, #689F38);
  border-radius: 50%;
  opacity: 0.7;
  animation: pulse 3s infinite ease-in-out 0.5s;
}

.tree-leaves::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 10px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center, #CDDC39, #AFB42B);
  border-radius: 50%;
  opacity: 0.5;
  animation: pulse 3s infinite ease-in-out 1s;
}

.eco-stats {
  display: flex;
  gap: 30px;
  margin-top: 10px;
}

.eco-stat {
  display: flex;
    flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #4CAF50;
}

.eco-info {
  text-align: center;
  padding: 15px;
  background-color: rgba(76, 175, 80, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(76, 175, 80, 0.1);
}

.eco-info h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #4CAF50;
}

.eco-info p {
  margin: 0 0 15px 0;
  font-size: 12px;
  color: #666;
}

.impact-meter {
  height: 8px;
    width: 100%;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.impact-progress {
  height: 100%;
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  border-radius: 4px;
  transition: width 1s ease-out;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .leaderboard-container {
    flex-direction: column;
  }
  
  .leaderboard-column {
    flex: auto;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .animation-column {
    flex: auto;
    padding: 15px;
  }
  
  .user-info-simple {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .user-points-simple {
    flex-direction: column;
    gap: 2px;
  }
  
  .page-indicators {
    display: none;
  }
  
  .simple-pagination {
    justify-content: space-between;
  }
  
  .eco-stats {
    gap: 15px;
  }
}

/* 添加表格样式 */
.table-container,
.empty-state,
.empty-icon,
.simple-table,
.rank-cell,
.rank-number,
.user-cell,
.user-avatar-table,
.default-avatar-table,
.user-name-table,
.rank-badge-table,
.level-cell,
.score-cell,
.score-1,
.score-2,
.score-3,
.score-top {
  /* 这些样式已被删除，因为相关组件已移除 */
}

/* 社区积分排行榜样式 */
.community-leaderboard {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: 1.8s;
}

.leaderboard-container {
  display: flex;
  flex-direction: row;
}

.leaderboard-column {
  flex: 6;
  border-right: 1px solid #f0f0f0;
}

.animation-column {
  flex: 4;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.simple-leaderboard {
  padding: 0;
}

.loading-simple {
  text-align: center;
  padding: 30px;
}

.user-list {
  border-top: 1px solid #f0f0f0;
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.user-list::-webkit-scrollbar {
  width: 6px;
}

.user-list::-webkit-scrollbar-thumb {
  background-color: rgba(76, 175, 80, 0.3);
  border-radius: 3px;
}

.user-list-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.user-list-item:hover {
  background-color: #f9f9f9;
}

.user-list-item.current-user {
  background-color: rgba(76, 175, 80, 0.05);
}

.user-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
  background-color: #e0e0e0;
  font-size: 12px;
}

.user-rank.rank-1 {
  background-color: #FFC107;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.user-rank.rank-2 {
  background-color: #9E9E9E;
  box-shadow: 0 0 5px rgba(158, 158, 158, 0.5);
}

.user-rank.rank-3 {
  background-color: #BF360C;
  box-shadow: 0 0 5px rgba(191, 54, 12, 0.5);
}

.user-rank.rank-top {
  background-color: #4CAF50;
}

.user-avatar-simple {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.user-avatar-simple img, .default-avatar-simple {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar-simple {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: white;
}

.user-info-simple {
    flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-name-simple {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.user-points-simple {
  display: flex;
  font-size: 12px;
  color: #666;
  gap: 12px;
}

.points-value {
  color: #4CAF50;
  font-weight: 500;
}

.carbon-value {
  color: #03A9F4;
}

.empty-simple {
    text-align: center;
  padding: 30px;
  color: #999;
}

/* 简易分页控制 */
.simple-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
}

.simple-page-btn {
  padding: 6px 15px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.simple-page-btn:hover:not(:disabled) {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.simple-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-indicators {
  display: flex;
  margin: 0 10px;
}

.page-number {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-number:hover {
  background-color: #f0f0f0;
}

.page-number.active {
  background-color: #4CAF50;
  color: white;
}

/* 右侧生态动画专栏 */
.eco-animation {
  width: 100%;
  height: 100%;
  display: flex;
    flex-direction: column;
    align-items: center;
  gap: 20px;
  padding: 20px;
}

.eco-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.growing-tree {
  position: relative;
  width: 120px;
  height: 180px;
  margin-bottom: 20px;
}

.tree-trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 60px;
  background: linear-gradient(to bottom, #8B4513, #A0522D);
  border-radius: 0 0 5px 5px;
}

.tree-leaves {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at center, #4CAF50, #2E7D32);
  border-radius: 50%;
  animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.tree-leaves::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 5px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at center, #8BC34A, #689F38);
  border-radius: 50%;
  opacity: 0.7;
  animation: pulse 3s infinite ease-in-out 0.5s;
}

.tree-leaves::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 10px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center, #CDDC39, #AFB42B);
  border-radius: 50%;
  opacity: 0.5;
  animation: pulse 3s infinite ease-in-out 1s;
}

.eco-stats {
  display: flex;
  gap: 30px;
  margin-top: 10px;
}

.eco-stat {
  display: flex;
    flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #4CAF50;
}

.eco-info {
  text-align: center;
  padding: 15px;
  background-color: rgba(76, 175, 80, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(76, 175, 80, 0.1);
}

.eco-info h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #4CAF50;
}

.eco-info p {
  margin: 0 0 15px 0;
  font-size: 12px;
  color: #666;
}

.impact-meter {
  height: 8px;
    width: 100%;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.impact-progress {
  height: 100%;
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  border-radius: 4px;
  transition: width 1s ease-out;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .leaderboard-container {
    flex-direction: column;
  }
  
  .leaderboard-column {
    flex: auto;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .animation-column {
    flex: auto;
    padding: 15px;
  }
  
  .user-info-simple {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .user-points-simple {
    flex-direction: column;
    gap: 2px;
  }
  
  .page-indicators {
    display: none;
  }
  
  .simple-pagination {
    justify-content: space-between;
  }
  
  .eco-stats {
    gap: 15px;
  }
}
</style> 